<template>
	<view class="system-info">
		<view class="system-info-item" v-for="item in systemInfoList" :key="item.id">
			<view class="system-info-time-box">
				<view class="system-info-time">
					{{$u.timeFormat(item.create_time)}}
				</view>
			</view>
			<view class="system-info-content-box">
				<view class="system-info-title">
					{{item.title}}
				</view>
				<view class="system-info-content">
					{{item.content}}
				</view>
			</view>
		</view>
		<u-loadmore :status="loadingText.status" :loading-text="loadingText.inLoading"
			:loadmore-text="loadingText.beforeLoading" :nomore-text="loadingText.nomoreText" :height="40" />
	</view>
</template>

<script>
	import {
		get_system_info
	} from '@/api/contents/systemInfo/systemInfo.js'
	export default {
		data() {
			return {
				systemInfoList: [{
					title:'更新通知',
					content:'新版本上线了，增加新功能，修复若干bug',
				},
				{
					title:'版本更新',
					content:'新版本上线了，增加新功能，修复若干bug',
				},
				{
					title:'维护公告',
					content:'新版本将以3月7日10点更新，届时不停机更新，更新完成后获取版本奖励',
				}],
				pageSize: {
					limit: 5,
					page: 1
				},
				loadingText: {
					inLoading: '努力加载中',
					beforeLoading: '上拉加载更多',
					nomoreText: '没有更多了',
					status: 'loadmore'
				}
			};
		},
		methods: {
			getSystemInfo() {
				get_system_info(this.pageSize).then(res => {
					if (res.code == 1) {
						if (res.data.list.length) {
							this.systemInfoList = [...this.systemInfoList, ...res.data.list]
							this.loadingText.status = 'loadmore';
						} else {
							this.loadingText.status = 'nomore'
						}
					}
				})
			}
		},
		onReachBottom() {
			this.loadingText.status = 'loading';
			this.pageSize.page++;
			this.getSystemInfo();
		},
		onLoad() {
			this.getSystemInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.system-info {
		// #ifdef H5
		min-height: calc(100vh - 44px);
		//  #endif
		// #ifdef MP-WEIXIN
		min-height: 100vh;
		// #endif
		background-color: #F5F7FA;
		padding: 0 40upx;

		.system-info-item {
			.system-info-time-box {
				height: 150upx;
				display: flex;
				justify-content: center;
				align-items: center;

				.system-info-time {
					padding: 10upx 10upx;
					background: #dcdddf;
					border-radius: 26upx;
					font-size: 24upx;
					font-weight: 400;
					color: #ffffff;
					letter-spacing: 0.6px;
				}
			}

			.system-info-content-box {
				border-radius: 4upx;
				background-color: #fff;
				padding: 30upx 24upx;

				.system-info-title {
					font-size: 32upx;
					font-weight: 800;
					color: #3e3e3e;
				}

				.system-info-content {
					padding-top: 14upx;
					font-size: 28upx;
					font-weight: 400;
					color: #999999;
					line-height: 50upx;
				}
			}
		}
	}
</style>
